<template>
  <div>
    <van-nav-bar title="足迹">
      <template #left>
        <van-icon size="18" name="arrow-left" @click="goback" />
      </template>
      <template #right>
        <div @click="clear_collect">清空</div>
      </template>
    </van-nav-bar>
    <div v-if="xianshi" class="content">
      <div
        class="hang"
        v-for="(shuju, index) in budiness_info_list"
        :key="index"
        @click="shangjia_fn(index)"
      >
        <van-image class="hang_l" :src="shuju.budiness_headimg" alt="" />
        <div class="hang_z"></div>
        <div class="hang_r">
          <div>
            <div>
              <div>
                <div>{{ shuju.budiness_name }}</div>
                <div class="piyue_status">
                  {{ shuju.budiness_time }}&nbsp;&nbsp;{{ shuju.budiness_juli }}
                </div>
              </div>
              <div class="pingfen">
                <span>评分:4.9</span>
                <span>&nbsp;月售:{{ shuju.budiness_xiaoliang }}</span>
                <span>&nbsp;人均:￥{{ shuju.budiness_renjun }}</span>
              </div>
              <div class="zhoubao_time">
                <span>起送￥{{ shuju.budiness_qisong }}</span>
                <span>配送约￥{{ shuju.budiness_peisongfei }}</span>
              </div>
              <div class="rexiao">{{ shuju.budiness_paiming }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-empty
      v-else
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        description="你还没有浏览过商家呢"
      />
  </div>
</template>

<script>
import { Dialog, Toast } from "vant";
export default {
  name: "collet",
  data() {
    return {
      user_id: JSON.parse(localStorage.getItem("waimai")).user_id,
      budiness_id_list:[],
      budiness_info_list: [],
      xianshi: false
    };
  },

  created() {
    this.axios.get('/get_footor?a=' + this.user_id)
    .then(res => {
      if (res.data.data.length == 0) {
        this.xianshi = false
      } else {
          this.xianshi = true
      res.data.data.map((item) => {
        this.budiness_id_list.push(item.budiness_id)
      })
      console.log(this.budiness_id_list);
      this.budiness_id_list.map((item) => {
        this.axios.get('/get_business_one_id?business_id=' + item)
        .then(res => {
          this.budiness_info_list.push(res.data.data[0])
          this.budiness_info_list = this.budiness_info_list.sort(this.compare('budiness_id' , -1))
        })
      })
      }
    })
  },
  
  methods: {
    goback() {
      this.$router.go(-1);
    },
    shangjia_fn(index) {
      this.$router.push({name: "shangjia",params: {shangjia_id: this.budiness_info_list[index].budiness_id,},});
    },
    clear_collect() {
      if(this.budiness_info_list.length == 0) {
        Toast("已经很干净了")
        return
      }
      Dialog.confirm({
        title: "提示",
        message: "确定要清空收藏吗",
      })
        .then(() => {
          this.axios.get('/delete_footor?a=' + this.user_id)
            .then(() => {
              Toast.success("操作成功");
              this.$nextTick(() => {
                this.budiness_info_list = []
                this.xianshi = false
              });
            })
        })
    },
    compare(shuxing , sort){
      return (a,b) => {
        var value1 = a[shuxing];
        var value2 = b[shuxing];
        if(sort == 1){
          return value1 - value2;
        }else{
          return value2 - value1;
        }
      }
    },
  },
};
</script>

<style scoped>
.van-icon {
  color: black;
}

.van-nav-bar {
  position: fixed;
  top: 0px;
  width: 100%;
}

/deep/.van-nav-bar__content {
  background-color: rgb(231, 231, 231);
}

.content {
  margin-top: 46px;
}

.hang {
  width: 90%;
  margin: 10px auto;
  border-radius: 10px;
  background-color: white;
  display: flex;
  padding: 15px 8px;
}
.hang_l {
  width: 25%;
}
.hang_z {
  flex: 1;
}
.pingfen {
  font-size: 10px;
  line-height: 20px;
}
.hang_r {
  flex: 18;
}
.piyue_status {
  margin-top: 23px;
  width: 33%;
  float: right;
  text-align: center;
  color: black;
  font-size: 10px;
}
.zhoubao_time {
  font-size: 12px;
}
.rexiao {
  border: 1px solid #4c572e;
  color: white;
  font-size: 10px;
  width: 60%;
  background-color: #8fa849;
  text-align: center;
  border-radius: 15px;
  margin-top: 5px;
}

.custom-image {
  margin-top: 60px;
}
</style>